<template>
  <div class="container">
    <div class="banner" :style="{height:'4.65rem'}">
      <img v-lazy="pageImgObject.pic01" alt="">
      <span id="share" @click="shareForWechat">分享</span>
    </div>
    <div class="module-container">
      <div class="tab" :style="{height:'0.91rem'}">
        <img v-lazy="pageImgObject.pic02" alt="">
        <div class="entry entry01" @click="changeForPage(0)"></div>
        <div class="entry entry02" @click="changeForPage(1)"></div>
      </div>
      <div class="module module-a" v-if="currentTab!=1">
        <div class="sub-main" v-for="(sunItem,index) in pageDataModule.dataModuleA.top" :key="'menu'+index">
          <div :style="{height:'4.76rem'}"><img v-lazy="pageImgArray[index]" alt=""></div>
          <div class="goods-menu">
            <SelfItem :parentData="item" :styleData="{width:'31.86%'}" :type="1" @childEvent="goForGoodsDetail" v-for="(item,index) in sunItem" :key="index"/>
          </div>
        </div>
      </div>
      <div class="module module-b" v-else >
        <div class="sub-menu">
          <div :style="{height:'4.81rem'}" v-for="(sunItem,index) in pageDataModule.dataModuleB.top" :key="'sub'+index">
            <div v-if="index%2==0"><img :src="pageImgArray[index+5]" alt=""></div>
            <div class="goods" @click="goForGoodsDetail(sunItem.goods_id)">
              <p class="name">{{sunItem.goods_name}}</p>
              <div class="price">限时价格:<i>￥</i><i class="num">{{sunItem.flash_price}}</i></div>
              <div class="pic"><img :src="sunItem.img640_url" alt=""></div>
            </div>
            <div v-if="index%2!=0"><img :src="pageImgArray[index+5]" alt=""></div>
          </div>
        </div>
        <div class="sub-main" v-for="(sunItem,index) in pageDataModule.dataModuleB.bottom" :key="'menu'+index">
          <div :style="{height:'0.91rem'}"><img v-lazy="pageImgArray[index+3]" alt=""></div>
          <div class="wrapper" :style="{background:index==0?'#B20044':'#02366E'}">
            <div class="scroll-box" :style="{width:2.12*5+'rem'}">
              <ScrollItem :parentData="item" :styleData="childStyle" @childEvent="goForGoodsDetail" v-for="(item,index) in sunItem" :key="index"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="more" v-if="moreData.specialArrList.length">
      <div><img v-lazy="pageImgObject.pic06" alt=""></div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import SelfItem from './self.vue'
  import ScrollItem from 'components/GoodsItems/scrollItem.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{ ScrollItem, SpecialItem, SelfItem },
    data(){
      return{
        currentTab:0,
        pageImgObject:{},
        pageImgArray:[],
        childStyle:{width:'2rem'},
        pageDataModule:{
          dataModuleA:{ top:[] },
          dataModuleB:{ top:[], bottom:[] }
        },
        moduleOne:[
          1612579,1612581,1612583,1612677,1612567,1612571,1612683,1612685,1612589,
          1612573,1612585,1612591,1612687,1612689,1612691,1612587,1612593,1612675,
          1612577,1612569,1612575,1612563,1612565,1612673,1611535,1611541,1611537
        ],
        moduleTwo:[
          1611551,1612561,1616397,1611559,
          1611545,1611547,1611467,1611561,1611529,1611531,1611553,1611555,1611549,1611473,
          1611569,1611533,1611539,1611543,1611557,1611563,1611471,1611469,1611565,1611567
        ],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'72147,72293,72119,72121,72117,71901,72075,72111,71943,72257,71953,71925,72217,72099,72221,72179,72261,72181,72183,72203,72205,72251,72159,72089,72095,71761,72345,71101',
          specialArrList:[]
        }
      } 
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.pageImgObjectFunc();
      this.changeForPage(-1);
    },
    mounted(){
      this.moreSpecial();
    },
    methods:{
      pageImgObjectFunc(){
        this.pageImgObject={
          pic01:require('../../../assets/img/loverDayVa/loverDayVa01.jpg'),
          pic02:require('../../../assets/img/loverDayVa/loverDayVa02.png'),
          pic06:require('../../../assets/img/loverDayVa/loverDayVa06.jpg'),
          pic13:require('../../../assets/img/loverDayVa/loverDayVa13.jpg'),
          pic14:require('../../../assets/img/loverDayVa/loverDayVa14.jpg'),
        };
        this.pageImgArray=[
          require('../../../assets/img/loverDayVa/loverDayVa03.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa04.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa05.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa07.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa08.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa09.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa10.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa11.jpg'),
          require('../../../assets/img/loverDayVa/loverDayVa12.jpg')
        ]
      },
      changeForPage(val){
        if( val ==this.currentTab ){ return false}
        if(val>0){
          this.bgImage=require('../../../assets/img/loverDayVa/loverDayVa14.jpg');
          this.getGoodsAction(this.moduleTwo.toString(),1);
        }else{
          this.bgImage=require('../../../assets/img/loverDayVa/loverDayVa13.jpg');
          this.getGoodsAction(this.moduleOne.toString(),0);
        }
        this.currentTab = val;
        document.querySelectorAll("body")[0].style.backgroundImage=`url(${this.bgImage})`;
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(list,type){
        getGoodsListApi(list).then(res =>{
          if(res.code==200 && res.status=='success'){
            if(type){
              let limitTop = 2,perPageNum=10,abandon=4,tempData=[];
              for (let index = 0; index < limitTop; index++) {
                let element = res.data.slice(index*perPageNum+abandon,(index+1)*perPageNum+abandon);
                tempData.push(element);
              };
              this.pageDataModule.dataModuleB.top=res.data.slice(0,4);
              this.pageDataModule.dataModuleB.bottom=tempData;
            }else{
              let limitTop = 3,perPageNum=9,tempData=[];
              for (let index = 0; index < limitTop; index++) {
                let element = res.data.slice(index*perPageNum,(index+1)*perPageNum);
                tempData.push(element);
              }
              this.pageDataModule.dataModuleA.top=tempData;
            }
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").indexOf(e)>-1;
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less">
html,body{
  background-image: url('../../../assets/img/loverDayVa/loverDayVa13.jpg');
  background-repeat: repeat-y;
  background-size: contain;
}
.vux-toast,.weui-toast {
  font-size: .32rem;
  line-height: 0.4rem;
}
</style>

<style lang="less" scoped>
.banner{
  position: relative;
  #share{
    width: 1.05rem;
    height: 0.4rem;
    padding-top: 0.1rem;
    color: coral;
    text-align: center;
    font-size: 0.3rem;
    border-radius: 0.5rem 0 0 0.5rem;
    background: #fff;
    position: absolute;
    top: 0.2rem;right: 0;
  }
}
.module-container{
  margin: 0 0.15rem;
  .tab{
    position: relative;
    &>div{
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;left: 0;
      &:last-child{left:50%;}
    }
  }
  .module{
    .goods-menu{
      display: flex;
      flex-wrap: wrap;
      padding: 0.15rem 0;
      .goods:nth-child(3n){
        margin-right: 0;
      }
    }
  }
  .module-b{
    .sub-menu{
      &>div{
        display: flex;
        flex-wrap: nowrap;
        margin: 0.15rem 0;
        &>div{
          width: 3.28rem;
          margin: 0 0.15rem;
          color: #ffffff;
          font-size: 0.3rem;
          .name{
            height: 0.8rem;
            line-height: 0.4rem;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .price{
            line-height: 0.7rem;
            i{
              font-style: normal;
              color: #D21D3D;
              font-family: '微软雅黑';
            }
            .num{
              font-size: 0.4rem;
              color: #D21D3D;
              font-family: '微软雅黑';
            }
          }
          .pic{
            width: 3.2rem;
            height: 3.2rem;
            border:0.04rem solid #000;
          }
        }
      }
    }
    .wrapper{
      padding-left: 0.15rem;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      .scroll-box{
        display: flex;
        flex-wrap: wrap;
        .goods{
          margin-bottom: 0.1rem;
        }
      }
    }
    .wrapper::-webkit-scrollbar{width: 0;height: 0}
  }
}
.more{
  background-image: url('../../../assets/img/loverDayVa/loverDayVa14.jpg');
  background-repeat: repeat-y;
  background-size: contain;
  .special{
    margin: 0 0.1rem;
    margin-bottom: 0.1rem;
    &:last-child{margin-bottom: 0;}
  }
}
</style>